﻿<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<title>EasyHelper分页jQuery插件</title>

<link rel="stylesheet" th:href="@{/static/admin/css/easyhelper/easyhelper.min.css}">
<style>
	.content {
		margin: 30px auto;
		width: 1000px;
		height: 409px;
		border: #dfdfdf solid 1px;
		overflow: hidden;
	}
	.content li {
		display: block;
		height: 40px;
		line-height: 40px;
		text-align: center;
		font-size: 14px;
		border-bottom: #e8e8e8 solid 1px;
	}
	.page {
		text-align: right;
		margin-bottom: 200px;
	}
</style>

</head>
<body>

<div class="content">
	<ul>
		<li>1</li>
		<li>1</li>
		<li>1</li>
		<li>1</li>
		<li>1</li>
		<li>1</li>
		<li>1</li>
		<li>1</li>
		<li>1</li>
		<li>1</li>
		<li>1</li>
		<li>1</li>
	</ul>
</div>
<div class="page" id="page"></div>

<script th:src="@{/static/admin/js/easyhelper/jquery.min.js}"></script>
<script th:src="@{/static/admin/js/easyhelper/jquery.transit.min.js}"></script>
<script th:src="@{/static/admin/js/easyhelper/es6-shim.min.js}"></script>
<script th:src="@{/static/admin/js/easyhelper/easyhelper.min.js}"></script>
<script>

	// 本地模拟的内容生成函数
	var $content = $( ".content" );
	function createContent ( i, index ) {
		$content.eq( index ).empty().html( ('<li>' + i + '</li>').repeat(10) );
	}

	// 调用分页功能
	Helper.ui.page("#page", {
		total: 2000,
		pageSize: 2,
		showTotal: true,
		showTo: true,
		currentPage: 1,
		change: function ( i ) {
			console.log(i);
			createContent( i, 0 );
		}
	});

</script>

</body>
</html>